{extend name='layout/default'/}
{block name='main'}
<style>
    .managerPage {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(6, minmax(100px, 200px));
        grid-gap: 15px;
    }

    .managerPage > div {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .menuTop {
        padding: 15px 0;
        display: flex;
    }

    .menuTop-leftBox {
        display: flex;
        height: 40px;
        border-radius: 30px;
        background: #46A6F8;
    }

    .menuTop-leftBox > button {
        border: none;
        height: 100%;
        border-radius: 30px;
        padding: 0 20px;
        cursor: pointer;
    }

    .menuTop-control {
        color: #ffffff;
        cursor: pointer;
        padding: 10px 20px;
    }
</style>
<div class="menuTop">
    <div class="menuTop-leftBox">
    </div>
    <div class="menuTop-leftBox" style="margin-left: 15px;user-select: none">
        <div class="menuTop-control" id="createFolder">新建文件夹</div>
    </div>
</div>
<div class="managerPage">
    <div>
        <a href="/index/manager/folder?folder=0">
            <img src="/static/images/wenjianjia.svg" style="width: 150px;height: 150px" alt="默认目录"/>
            <div style="overflow: hidden;width: 100%;position: relative;text-align: center;text-overflow: ellipsis;white-space: nowrap; color: var(--color)">
                默认目录
            </div>
        </a>
    </div>
    {foreach $list as $item}
    <div class="folder-list" data-id="{$item.id}" data-name="{$item.name}">
        <a href="/index/manager/folder?folder={$item.id}">
            <img src="/static/images/wenjianjia.svg" style="width: 150px;height: 150px" alt="{$item.name}"/>
            <div style="overflow: hidden;width: 100%;position: relative;text-align: center;text-overflow: ellipsis;white-space: nowrap; color: var(--color)">
                {$item.name}
            </div>
        </a>
    </div>
    {/foreach}
</div>
<div id="mouseRight">
    <ul>
        <li id="reName">修改名称</li>
        <li id="delFolder">删除目录</li>
    </ul>
</div>
<script>
    var chooseId = null;
    $("#reName").click(function () {
        $.ajax({
            url: '/index/manager/createFolderTemplate',
            method: 'get',
            success: (data) => {
                safeModel = layer.open({
                    title: '修改文件夹名称',
                    area: ['370px', '180px'],
                    type: 1,
                    content: data //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                $("[name='name']").val($(`[data-id='${chooseId}']`).attr("data-name"))
                $("[name='id']").val(chooseId)
            }
        })
    })
    $("#delFolder").click(function () {
        let name = $(`[data-id='${chooseId}']`).attr("data-name")
        layer.confirm(`确定删除文件夹"<b style="color: red">${name}</b>"？删除后文件夹内文件将会一并删除，请谨慎操作`,{icon: 2, title:'警告'}, function (index) {
            $.ajax({
                url: '/index/manager/FolderDel',
                method: 'post',
                data: {id: chooseId},
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        location.reload();
                    }
                }
            })
        });
    })

    function listen() {
        $(".folder-list").on("contextmenu", function (e) {
            chooseId = $(this).attr("data-id");
            const {clientX, clientY} = e;
            $("#mouseRight").css({
                top: clientY,
                left: clientX,
                display: 'block'
            })
            e.preventDefault();
            e.stopPropagation();
        })
    }

    const closeMouse = () => {
        $("#mouseRight").css({
            display: 'none'
        })
    }
    window.addEventListener("click", () => {
        closeMouse()
    })
    listen();
    let folderModel = null;
    $("#createFolder").click(function () {
        $.ajax({
            url: '/index/manager/createFolderTemplate',
            method: 'get',
            success: (data) => {
                layer.close(folderModel);
                folderModel = layer.open({
                    title: '创建文件夹',
                    area: ['370px', '180px'],
                    type: 1,
                    content: data //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
            }
        })
    })
</script>
{/block}